<template>
	<view class="wrapper">
		<view class='productList'>
			<view class="brandHead" v-if="where.brand_id">
				<image
					src="https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/12/56e53202412061930492434.jpg">
				</image>
				<image :src="brandInfo.pic">
				</image>
				<view>{{brandInfo.brand_name||''}}</view>
				<view class="brandHeadDec" :class="{'SeeMore':isClose}">
					{{brandInfo.brand_content||''}}
				</view>
				<view class="seeMore" @click="isClose=!isClose">{{isClose?'收起':'更多品牌信息'}}
					<text style="margin-left: 10rpx;" class="iconfont" :class="isClose?'icon-xiangshang':'icon-xiangxia'"></text>
				</view>
			</view>
			<uv-sticky style="top:0;">
				<view class='nav acea-row row-middle'>
					<view class='item' :class="{active:actIdx==1}" @click="actIdx=1">
						综合
					</view>
					<view class='item' :class="{active:actIdx==2}" @click="actIdx=2">
						分类
					</view>
					<view class='item' :class="{active:actIdx==3}" @click="actIdx=3">
						智能排序
					</view>
					<view class='item' @click="onClick">
						筛选
						<image class="filterImg"
							src="https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/12/fa30f202412081445412316.png">
						</image>
					</view>
				</view>
				<view class="screenList">
					<scroll-view :scroll-x="true" style="white-space: nowrap;">
						<template v-if="actIdx==1">
							<view class="screenList-item" :class="{active:where.news==1}" @click="onSynthetical">NEW</view>
						</template>
						<template v-else-if="actIdx==2">
							<view class="scrollCate">
								<view class="screenList-item" v-for="item in goodList" :key="item.id" :class="{active:item.checked}"
									@click="onGood(item.id,1)">{{item.cate_name}}</view>
							</view>
						</template>
						<template v-else-if="actIdx==3">
							<view class="scrollCate">
								<view class="screenList-item" :class="{active:where.priceOrder=='asc'}" @click="onPriority('asc',0)">
									低价优先</view>
								<view class="screenList-item" :class="{active:where.priceOrder=='desc'}" @click="onPriority('desc',0)">
									高价优先</view>
								<view class="screenList-item" :class="{active:where.salesOrder=='desc'}" @click="onPriority('desc',1)">
									销量优先</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</uv-sticky>

			<view>
				<view class='list acea-row row-between-wrapper' :class='is_switch==true?"":"on"'>
					<view class='item' :class='is_switch==true?"":"on"' hover-class='none' v-for="(item,index) in productList"
						:key="index" @click="godDetail(item)">
						<view class='pictrue' :class='is_switch==true?"":"on"'>
							<image :src='item.image' :class='is_switch==true?"":"on"'></image>
							<span class="pictrue_log_class" :class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
								v-if="item.activity && item.activity.type === '1' && $permission('seckill')">{{$t(`秒杀`)}}</span>
							<span class="pictrue_log_class" :class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
								v-if="item.activity && item.activity.type === '2' && $permission('bargain')">{{$t(`砍价`)}}</span>
							<span class="pictrue_log_class" :class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'"
								v-if="item.activity && item.activity.type === '3' && $permission('combination')">{{$t(`拼团`)}}</span>
						</view>
						<view class='text' :class='is_switch==true?"":"on"'>
							<view class="productSeason" v-if="item.is_new">新季</view>
							<view class='name line1' :class="{top:item.is_new}">{{item.brand_name}}</view>
							<view class='name1 line1'>{{item.store_name}}</view>
							<view class='money font-color' :class='is_switch==true?"":"on"'>{{$t(`￥`)}}<text
									class='num'>{{item.price}}</text>

								<text class="discountPrice"> {{$t(`￥`) + item.ot_price}}</text>
							</view>
							<view class='vip acea-row row-between-wrapper' :class='is_switch==true?"":"on"'>
								<view class='vip-money' v-if="item.vip_price && item.vip_price > 0">
									{{$t(`￥`)}}{{item.vip_price}}
									<image
										src='https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/10/4d33d202410271836536488.png'>
									</image>
								</view>
								<!---<view>{{$t(`已售`)}} {{item.sales}}{{$t(item.unit_name) || $t(`件`)}}</view>-->
							</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view>
				</view>

			</view>

		</view>
		<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
			<view class='emptyBox'>
				<image :src="imgHost + '/statics/images/no-thing.png'"></image>
				<view class="tips">{{$t(`暂无商品，去看点别的吧`)}}</view>
			</view>
			<recommend :hostProduct="hostProduct"></recommend>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
		<view v-if="scrollTopShow" class="back-top" @click="goTop">
			<text class="iconfont icon-xiangshang"></text>
		</view>
		<uv-popup ref="popup" mode="right" custom-style="width: 620rpx;">
			<view class="animation-content">
				<scroll-view class="screeningItemOutBox" :scroll-y="true">
					<view class="screeningItemTitleBox" v-if="isBrand">
						<view class="screeningItemTitle">品牌</view>
						<view class="clickChangeBrand" @click="BrandList">选择品牌 ></view>
					</view>
					<view class="screeningItemBoxCateSubBox" v-if="tagBrandList.length">
						<view class="brandItem" v-for="item in tagBrandList" :key="item.id" @click="onBrandDel(item.id)">
							<text>{{item.brand_name}}</text>
							<text style="margin-left: 20rpx;color:#999;">x</text>
						</view>
					</view>
					<view class="screeningItemBox">
						<view class="screeningItemTitle">价格范围</view>
						<view class="priceBox">
							<uv-input placeholder="最低价" type="number" inputAlign="center"
								:customStyle="{width: '256rpx',height: '78rpx',lineHeight: '78rpx',fontSize: '24rpx',color: '#c4c2c7',background: '#f8f8f8'}"
								v-model="minPrice"></uv-input>
							<view class="line"></view>
							<uv-input placeholder="最高价" type="number" inputAlign="center"
								:customStyle="{width: '256rpx',height: '78rpx',lineHeight: '78rpx',fontSize: '24rpx',color: '#c4c2c7',background: '#f8f8f8'}"
								v-model="maxPrice"></uv-input>
						</view>
						<view class="screeningItemInner" style="grid-template-columns: repeat(auto-fill, 270rpx);grid-gap: 20rpx;">
							<view class="screeningItem1" :class="{active:priceIdx==1}" @click="onPrice(1)">
								￥ 0 - ￥1000
							</view>
							<view class="screeningItem1" :class="{active:priceIdx==2}" @click="onPrice(2)">
								￥ 1000 - ￥5000
							</view>
							<view class="screeningItem1" :class="{active:priceIdx==3}" @click="onPrice(3)">
								￥ 5000 - ￥9999
							</view>
							<view class="screeningItem1" :class="{active:priceIdx==4}" @click="onPrice(4)">
								￥ 9999以上
							</view>
						</view>
					</view>
					<view class="screeningItemBox">
						<view class="screeningItemTitle">品类</view>
						<view class="screeningItemInner">
							<view class="screeningItem" v-for="item in goodList" :key="item.id" :class="{active:item.checked}"
								@click="onGood(item.id,2)">
								{{item.cate_name}}
							</view>
						</view>
					</view>
					<view class="screeningItemBox" v-if="dressSize.length">
						<view class="screeningItemTitle">服饰尺码</view>
						<view class="screeningItemInner">
							<view class="screeningItem" v-for="(item,index) in dressSize" :key="index" :class="{active:item.checked}"
								@click="onSize(item.value,0)">
								{{item.value}}
							</view>
						</view>
					</view>
					<view class="screeningItemBox" v-if="shoeSize.length">
						<view class="screeningItemTitle">鞋履尺码</view>
						<view class="screeningItemInner">
							<view class="screeningItem" v-for="(item,index) in shoeSize" :key="index" :class="{active:item.checked}"
								@click="onSize(item.value,1)">{{item.value}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="btnOutBox">
					<view class="resetBtn" @click="onReset">重置</view>
					<view class="sureBtn" @click="onSubmit">确认</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popup1" mode="right" custom-style="width: 620rpx;padding-top:90rpx">
			<uv-navbar title="选择品牌" @leftClick="leftClick" titleStyle="font-weight: 700;" :safeAreaInsetTop="false">
				<template v-slot:left>
					<image style="width: 34rpx;height: 34rpx;"
						src="https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/12/163a4202412122027387088.png"
						mode=""></image>
				</template>
			</uv-navbar>
			<view style="height: 600px;">
				<uv-index-list v-if="indexList.length" :index-list="indexList" activeColor="#333">
					<template v-for="(item, index) in itemArr">
						<uv-index-item>
							<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
							<view class="list-cell" v-for="cell in item" @click="onLineBody(cell.id)">
								<view>{{cell.brand_name}}</view>
								<image v-if="cell.checked" style="width: 20rpx;height: 20rpx;"
									src="https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/12/25d83202412132008403187.png"
									mode=""></image>
							</view>
						</uv-index-item>
					</template>
				</uv-index-list>
			</view>
			<view class="btnOutBox">
				<view class="resetBtn" @click="resetBrand">品牌重置</view>
				<view class="sureBtn" @click="submitBrand">品牌确认</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import home from '@/components/home';
	import {
		getProductslist,
		getProductHot,
		getBrandInfo,
		getBrandList,
		getProducts
	} from '@/api/store.js';
	import recommend from '@/components/recommend';
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail,
	} from '@/libs/order.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import colors from '@/mixins/color.js';
	import {
		goodList
	} from '@/static/goodList.js'
	export default {
		computed: mapGetters(['uid']),
		components: {
			recommend,
			home
		},
		mixins: [colors],
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				productList: [],
				is_switch: true,
				where: {
					sid: 3,
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 20,
					cid: 0,
					isnewOrder: 1,
					minPrice: '',
					maxPrice: '',
					sid: '',
				},
				price: 0,
				stock: 0,
				nows: false,
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				title: '',
				hostProduct: [],
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollTopShow: false,
				isClose: false,
				brandInfo: {},
				actIdx: 1,
				indexList: [],
				itemArr: [],
				brandList: [],
				goodList: [{
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/a254eaf94ae679b82c41b7d4440245ff.png",
					cate_name: "上衣",
					checked: false,
					id: 31,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/a254eaf94ae679b82c41b7d4440245ff.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/47a4c7f47a5a638276d4263c3c164c31.png",
					cate_name: "裤子",
					checked: false,
					id: 32,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/47a4c7f47a5a638276d4263c3c164c31.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/9242648f9b68f938e688e2e492437e64.png",
					cate_name: "鞋履",
					checked: false,
					id: 52,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/9242648f9b68f938e688e2e492437e64.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/4c1100f09908b2f1d90341ed424d1646.png",
					cate_name: "配饰",
					checked: false,
					id: 83,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/4c1100f09908b2f1d90341ed424d1646.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/acea7d910d9869393b655d19310a05f4.png",
					cate_name: "包袋",
					checked: false,
					id: 84,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/acea7d910d9869393b655d19310a05f4.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/716fb57accbf52e161aff6fe6a74fc71.png",
					cate_name: "大衣及外套",
					checked: false,
					id: 85,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/716fb57accbf52e161aff6fe6a74fc71.png",
					reward_brandid: ""
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/f72e78c2fe797596f3e6244da4f74c53.png",
					cate_name: "西装",
					checked: false,
					id: 34,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/f72e78c2fe797596f3e6244da4f74c53.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/5ee7f5e53284ccf461c0be10714a8c35.png",
					cate_name: "运动系列",
					checked: false,
					id: 88,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/5ee7f5e53284ccf461c0be10714a8c35.png",
					reward_brandid: "",
				}, {
					big_pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/7b3a7046b0948f15ca9e5f31e9cf1562.png",
					cate_name: "牛仔系列",
					checked: false,
					id: 87,
					pic: "https://xiaoxiao-1314720017.cos.ap-guangzhou.myqcloud.com/attach/2024/11/05/7b3a7046b0948f15ca9e5f31e9cf1562.png",
					reward_brandid: "",
				}],
				tagBrandList: [],
				minPrice: '',
				maxPrice: '',
				priceIdx: 0,
				dressSize: [],
				shoeSize: [],
				isBrand: true
			};
		},
		onLoad(options) {
			console.log(options);
			this.where.cid = options.cid || '';
			this.where.coupon_category_id = options.coupon_category_id || '';
			this.where.sid = options.sid || ''
			this.where.keyword = options.searchValue || ''
			this.where.productId = options.productId || ''
			this.where.brand_id = options.brand_id || ''
			const children = options.children ? JSON.parse(options.children) : [];
			if (children.length) {
				this.goodList = [];
				children.map(v => {
					this.goodList.push({
						...v,
						checked: false
					})
				})
			}
			this.get_product_list();
			const good = goodList.find(v => v.value == options.title)
			if (good && good.specification == 1) {
				this.getSpecification(good.specification).then(res => {
					res[0].detail.length && res[0].detail.map(v => {
						this.dressSize.push({
							value: v,
							checked: false
						})
					})
				})
			}

			if (good && good.specification == 2) {
				this.getSpecification(2).then(res => {
					res[0].detail.length && res[0].detail.map(v => {
						this.shoeSize.push({
							value: v,
							checked: false
						})
					})
				})
			}

			if (this.where.brand_id) {
				this.isBrand = false
				this.getBrand()
				this.getSpecification(1).then(res => {
					res[0].detail.length && res[0].detail.map(v => {
						this.dressSize.push({
							value: v,
							checked: false
						})
					})
				})
				this.getSpecification(2).then(res => {
					res[0].detail.length && res[0].detail.map(v => {
						this.shoeSize.push({
							value: v,
							checked: false
						})
					})
				})
			}
		},
		onReachBottom() {
			this.$set(this.where, 'page', this.where.page++)
			if (this.productList.length > 0) {
				this.get_product_list();
			} else {
				this.get_host_product();
			}
		},
		onPullDownRefresh() {
			this.loadend = false;
			this.$set(this.where, 'page', 1)
			if (this.productList.length > 0) {
				this.get_product_list();
			} else {
				this.get_host_product();
			}
		},
		methods: {
			onSubmit() {
				delete this.where.brandList
				delete this.where.ruleList

				let list = []
				this.tagBrandList.length && this.tagBrandList.map(v => list.push(v.id))
				if (list.length) {
					this.where.brandList = list
				}
				let arr = []
				this.dressSize.length && this.dressSize.map(v => arr.push(v.id))
				this.shoeSize.length && this.shoeSize.map(v => arr.push(v.id))
				if (arr.length) {
					this.where.ruleList = arr
				}
				let sid = []
				this.goodList.map(v => {
					if (v.checked) {
						sid.push(v.id)
					}
				})

				this.where.minPrice = this.minPrice
				this.where.maxPrice = this.maxPrice
				this.where.sid = sid
				this.productList = []
				this.loadend = false;
				this.where.page = 1;
				this.get_product_list(false)
			},
			onReset() {
				this.tagBrandList = []
				this.itemArr.forEach(v => {
					v.length && v.forEach(item => item.checked = false)
				})
				this.goodList.forEach(res => {
					res.checked = false;
				})
				this.dressSize.forEach(res => {
					res.checked = false;
				})
				this.shoeSize.forEach(res => {
					res.checked = false;
				})
				this.where.priceOrder = ""
				this.where.salesOrder = ""
				this.minPrice = ""
				this.maxPrice = ""
				this.productList = []
				this.loadend = false;
				this.where.page = 1;
				this.get_product_list(false)
			},
			onSynthetical() {
				this.where.news = this.where.news ? '' : 1
				this.productList = []
				this.loadend = false;
				this.where.page = 1;
				this.get_product_list(false)
			},
			onPriority(value, id) {
				if (!id) {
					this.where.priceOrder = value
					this.where.salesOrder = ""
				} else {
					this.where.priceOrder = ""
					this.where.salesOrder = value
				}
				this.productList = []
				this.loadend = false;
				this.where.page = 1;
				this.get_product_list(false)
			},
			onSize(value, index) {
				if (!index) {
					const index = this.dressSize.findIndex(v => v.value == value)
					this.dressSize[index].checked = !this.dressSize[index].checked
				} else {
					const index = this.shoeSize.findIndex(v => v.value == value)
					this.shoeSize[index].checked = !this.shoeSize[index].checked
				}
			},
			async getSpecification(id) {
				try {
					const {
						data
					} = await getProducts({
						id
					})

					return JSON.parse(data.info.rule_value)
				} catch (err) {
					console.log(err);
				}
			},
			onGood(id, idx) {
				console.log(id, idx);
				const index = this.goodList.findIndex(v => v.id == id)
				this.goodList[index].checked = !this.goodList[index].checked
				if (idx == 1) {
					console.log(idx, this.goodList, id);
					let sid = []
					this.goodList.map(v => {
						if (v.checked) {
							sid.push(v.id)
						}
					})
					console.log(this.goodList);
					this.productList = []
					this.loadend = false;
					this.where.page = 1
					this.where.sid = sid
					this.get_product_list(false)
				}
			},
			onPrice(index) {
				this.priceIdx = this.priceIdx == index ? 0 : index
				this.minPrice = ""
				this.maxPrice = ""
				switch (this.priceIdx) {
					case 1:
						this.minPrice = 0;
						this.maxPrice = 1000;
						break;
					case 2:
						this.minPrice = 1000;
						this.maxPrice = 5000;
						break;
					case 3:
						this.minPrice = 5000;
						this.maxPrice = 9999;
						break;
					case 4:
						this.minPrice = 9999;
						this.maxPrice = '';
						break;
				}
			},
			onBrandDel(id) {
				const index = this.tagBrandList.findIndex(v => v.id == id)
				this.tagBrandList.splice(index, 1)

				this.itemArr.forEach(v => {
					v.length && v.forEach(item => {
						if (item.id == id) {
							item.checked = false
						}
					})
				})
			},
			resetBrand() {
				this.itemArr.forEach(v => {
					v.length && v.forEach(item =>
						item.checked = false
					)
				})
			},
			submitBrand() {
				let brandList = []
				this.itemArr.map(v => {
					v.length && v.map(item => {
						if (item.checked == true) {
							brandList.push({
								id: item.id,
								brand_name: item.brand_name
							})
						}
					})
				})
				this.tagBrandList = brandList

				this.$refs.popup1.close()
			},
			onLineBody(id) {
				this.itemArr.forEach(v => {
					v.length && v.forEach(item => {
						if (item.id == id) {
							item.checked = !item.checked
						}
					})
				})
			},
			leftClick() {
				this.$refs.popup1.close()
			},
			BrandList() {
				this.$refs.popup1.open()

				getBrandList().then(res => {
					if (res.data.length) {
						res.data.map(v => {
							// let list = []
							const index = this.indexList.findIndex(item => item == v.initial)
							if (index == -1) {
								this.indexList.push(v.initial)
							}
						})

						const grouped = res.data.reduce((acc, item) => {
							let group = acc.find(g => g.initial == item.initial)
							if (group) {
								group.brands.push({
									id: item.id,
									brand_name: item.brand_name,
									checked: false
								})
							} else {
								acc.push({
									initial: item.initial,
									brands: [{
										id: item.id,
										brand_name: item.brand_name,
										checked: false
									}],
								})
							}
							return acc;
						}, [])
						this.itemArr = grouped.map(g => g.brands)
					}
				}).catch(err => {
					console.log(err);
				})
			},
			onClick() {
				this.$refs.popup.open();
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			// 去详情页
			godDetail(item) {
				console.log(item);
				goShopDetail(item, this.uid).then(res => {
					console.log(res);
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			async getBrand() {
				const res = await getBrandInfo(this.where.brand_id)
				if (res.status == 200) {
					this.brandInfo = res.data
				}
			},
			Changswitch() {
				this.is_switch = !this.is_switch
			},
			searchSubmit(e) {
				this.$set(this.where, 'keyword', e.detail.value);
				this.loadend = false;
				this.$set(this.where, 'page', 1)
				this.get_product_list(true);
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product() {
				if (this.hotScroll) return
				getProductHot(
					this.hotPage,
					this.hotLimit,
				).then(res => {
					this.hotPage++
					this.hotScroll = res.data.length < this.hotLimit
					this.hostProduct = this.hostProduct.concat(res.data)
					// that.$set(that, 'hostProduct', res.data)
				});
			},
			//点击事件处理
			set_where(e) {
				this.actIdx = e
				this.loadend = false;
				this.$set(this.where, 'page', 1);
				this.get_product_list(true);
			},
			//设置where条件
			setWhere() {
				if (this.price == 0) this.where.priceOrder = '';
				else if (this.price == 1) this.where.priceOrder = 'asc';
				else if (this.price == 2) this.where.priceOrder = 'desc';
				if (this.stock == 0) this.where.salesOrder = '';
				else if (this.stock == 1) this.where.salesOrder = 'asc';
				else if (this.stock == 2) this.where.salesOrder = 'desc';
				this.where.news = this.nows ? 1 : 0;
			},
			//查找产品
			get_product_list(isPage) {
				// this.setWhere();
				console.log(this.where);
				if (Array.isArray(this.where.sid)) {
					this.where.sids = this.where.sid;
					delete this.where.sid;
				}

				if (this.loadend) return;
				if (this.loading) return;
				if (isPage === true) this.$set(this, 'productList', []);
				this.loading = true;
				this.loadTitle = '';
				getProductslist(this.where).then(res => {
					let list = res.data;
					let productList = this.$util.SplitArray(list, this.productList);
					let loadend = list.length < this.where.limit;
					this.loadend = loadend;
					this.loading = false;
					this.loadTitle = loadend ? this.$t(`没有更多内容啦~`) : this.$t(`加载更多`);
					this.$set(this, 'productList', productList);
					this.$set(this.where, 'page', this.where.page + 1);
					if (!this.productList.length) this.get_host_product();
				}).catch(err => {
					this.loading = false;
					this.loadTitle = this.$t(`加载更多`);
				}).finally(() => {
					this.$refs.popup.close()
					uni.stopPullDownRefresh()
				});
			},
			scrolltolower() {
				if (this.productList.length > 0) {
					this.get_product_list();
					uni.$emit('scroll');
				} else {
					this.get_host_product();
					uni.$emit('scroll');
				}
			}
		},
		// 滚动监听
		onPageScroll(e) {
			this.scrollTopShow = e.scrollTop > 150
			this.old.scrollTop = e.scrollTop
		},

	}
</script>

<style scoped lang="scss">
	.wrapper {
		background: #fff;

		.back-top {
			position: absolute;
			right: 40rpx;
			bottom: 60rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #ccc;
			background-color: #fff;

			.icon-xiangshang {
				color: #ccc;
				font-weight: bold;
			}
		}
	}

	.productList .search {
		width: 100%;
		height: 86rpx;
		background: #999;
		padding-left: 23rpx;
		box-sizing: border-box;
		z-index: 9;
	}

	.productList .search .input {
		width: 640rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.productList .search .input input {
		width: 548rpx;
		height: 100%;
		font-size: 26rpx;
	}

	.productList .search .input .placeholder {
		color: #999;
	}

	.productList .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productList .search .icon-pailie,
	.productList .search .icon-tupianpailie {
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.productList .nav {
		height: 86rpx;
		color: #454545;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		z-index: 9;
	}

	.productList .nav .item {
		width: 25%;
		text-align: center;
	}

	.productList .nav .item.font-color {
		font-weight: bold;
	}

	.productList .nav .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.productList .list {
		padding: 0 20rpx 30rpx 20rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 240rpx;
		height: 320rpx;
		margin: 0 auto;
	}

	.productList .list .item .productSeason {
		width: 48rpx;
		height: 26rpx;
		background: linear-gradient(132deg, #d8af79, #c3893c);
		font-size: 18rpx;
		color: #fff;
		text-align: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.productList .list .item .top {
		margin-top: 20rpx;
	}

	.productList .list .item .name {
		line-height: 48rpx;
	}

	.productList .list .item .name1 {
		font-size: 24rpx;
		line-height: 30rpx;
		color: #999;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
		position: relative;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .money .discountPrice {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #d4d4d4;
		text-decoration: line-through;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 64rpx;
		height: 26rpx;
		margin-left: 4rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-bottom: 30rpx;

		.emptyBox {
			text-align: center;
			padding-top: 20rpx;

			.tips {
				color: #aaa;
				font-size: 26rpx;
			}

			image {
				width: 414rpx;
				height: 304rpx;
			}
		}
	}

	.brandHead {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 25rpx 30rpx 0;
		margin-bottom: 20rpx;
		position: relative;
	}

	.brandHead>image:first-of-type {
		width: 690rpx;
		height: 220rpx;
		margin-bottom: 26rpx;
	}

	.brandHead>image:nth-of-type(2) {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 196rpx;
		left: 56rpx;
		box-shadow: 0 4 14 0 rgba(0, 0, 0, 1.6);
		background: #fff;
	}

	.brandHead>view:nth-of-type(1) {
		font-size: 28rpx;
		color: #000;
		font-weight: 600;
		margin-left: 150rpx;
		line-height: 44rpx;
		margin-top: -10rpx;
	}

	.brandHeadDec {
		font-size: 28rpx;
		color: #888;
		margin-bottom: 23rpx;
		-webkit-line-clamp: 2;
		padding-top: 46rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.brandHeadDec.SeeMore {
		display: block;
	}

	.seeMore {
		font-size: 28rpx;
		margin-bottom: 22rpx;
		color: #888;
		text-align: center;
	}

	.nav.acea-row.row-middle {
		.item {
			padding: 20rpx 0;
		}

		.active {
			font-weight: 700;
			border-bottom: 4rpx solid #333;
		}

		.filterImg {
			width: 18rpx;
			height: 18rpx;
		}
	}

	.screenList {
		font-size: 24rpx;
		height: 80rpx;
		padding-left: 30rpx;
		line-height: 80rpx;
		background: #fff;

		.scrollCate {
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.screenList-item {
			padding: 0 22rpx;
			margin-right: 30rpx;
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			color: #5b5b5b;
			background: #f2f2f2;
			border-radius: 20px;
			font-weight: 500;

			&.active {
				background: #ffeeeb;
				color: #f57057;
			}
		}
	}

	.animation-content {
		width: 100%;
		background: #fff;
		position: absolute;
		right: 0;
		z-index: 1002;
		padding: 36rpx 25rpx 0
	}

	.animation-content,
	.screeningBox {
		height: 100%;
		box-sizing: border-box;
	}

	.screeningItemBox,
	.screeningItemOutBox {
		display: flex;
		flex-direction: column;
	}

	.screeningItemOutBox {
		height: calc(100% - 180rpx);
		overflow-y: auto;
	}

	.screeningItemTitleBox {
		font-size: 26rpx;
		color: #000;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.clickChangeBrand {
			color: #666;
			font-size: 12px;
		}
	}

	.screeningItemTitle {
		margin-bottom: 18rpx;
		font-size: 32rpx;
		font-weight: 700;
	}

	.screeningItemBox {
		font-size: 26rpx;
		color: #000;
		margin-bottom: 30rpx;
		width: 100%;

		.screeningItemInner {
			display: grid;
			grid-template-columns: repeat(auto-fill, 160rpx);
			grid-gap: 0 20rpx;

			.screeningItem1 {
				width: 260rpx;
				border: 1rpx solid #999;
				float: left;
				color: #666;
			}
		}

		.screeningItem,
		.screeningItem1 {
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 26rpx;
			box-sizing: border-box;
		}

		.screeningItem {
			border: 2rpx solid #999;
			margin: 10rpx;
			color: #333;
			padding: 0 15rpx;
			width: 170rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			white-space: normal;
		}

		.priceBox {
			margin-bottom: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.line {
				width: 30rpx;
				height: 2rpx;
				background: #acacac;
				margin: 0 15rpx;
			}
		}
	}

	.btnOutBox {
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -4rpx 8rpx -5rpx #000;
		position: absolute;
		bottom: 30rpx;
		height: 140rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 1003;

		.resetBtn,
		.sureBtn {
			height: 88rpx;
			border-radius: 4rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 88rpx;
			border: 1rpx solid #000;
		}

		.mask,
		.sureBtn {
			background: #000;
		}

		.sureBtn {
			width: 360rpx;
			color: #fff;
		}

		.resetBtn {
			width: 174rpx;
			background: #fff;
			color: #000;
		}
	}

	/deep/.lineBox .lineHeadBox {
		background: #f4f4f4;
	}

	.screeningItemBoxCateSubBox {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;

		.brandItem {
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 10rpx;
			font-size: 26rpx;
			color: #333;
			box-sizing: border-box;
			padding: 0 15rpx;
		}
	}

	.screeningItemInner .active {
		color: #f79380 !important;
		border: 2rpx solid #f79380 !important;
		position: relative;
	}

	.list-cell {
		/* #ifndef APP-PLUS */
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		/* #endif */
		padding: 20rpx 50rpx 20rpx 20rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
	}
</style>